<template>
    <div class="footer">
		   <li>
				   <svg class="icon" aria-hidden="true">
					 <use xlink:href="#icon-shouye"></use>
				   </svg><br />
				   首页
		   </li>
       <li>
               <svg class="icon" aria-hidden="true">
       			<use xlink:href="#icon-fenlei_"></use>
               </svg><br />
               分类
       </li>
       
       <li>
           <router-link to="/buy">
               <svg class="icon" aria-hidden="true">
       			<use xlink:href="#icon-gouwuche"></use>
               </svg><br />
               购物车
           </router-link>
       </li>
       
       <li>
               <svg class="icon" aria-hidden="true">
               	<use xlink:href="#icon-wode"></use>
               </svg><br />
               我的
       </li>
    </div>
</template>
<script src="./iconfont.js"></script>
<script>

  export default {
		
  }
</script>
<style lang="scss">
	.footer{
		background: #FAFAFA;
		width:100%;
		height : 1.3rem;
		display : flex;
		justify-content: space-around;
		align-items : center;
		position: absolute;
		bottom: 0;
		.icon {
		  width: 1.8em;
		  height: 1.8em;
		  vertical-align: -0.15em;
		  fill: currentColor;
		  overflow: hidden;
		  color: #0077AA;
		}		
		li{
		list-style : none;
		text-align : center;
		font-size: 0.24rem;
		a{
			text-decoration: none;
			color: #000000;
		}
	}
	.router-link-active{
		color: #7a5d3d;
	}
}
</style>